<template>
  <div class="my-container">
    <!--登陆展示-->
    <van-cell-group  class="my-info">
      <van-cell
        title="单元格" value="内容" center
        class="base-info"
      >
        <van-image
          class="avatar"
          slot="icon"
          width="50"
          height="50"
          round
          fit="cover"
          :src="require('../../assets/img/headIcon.jpeg')"
        />
        <div slot="title" class="name">{{ user.phone }}</div>
        <van-button
          class="update-btn"
          size="small"
          round
          @click="$router.push('/my/setting/')"
        >账号设置</van-button>
      </van-cell>
    </van-cell-group>
    <van-cell icon="coupon-o" border title="就诊人管理" is-link to="/patient" />
    <van-cell icon="coupon-o" border title="我的预约" is-link to="/order/my" />
    <van-cell icon="coupon-o" border title="我的处方笺" is-link to="/outpatientPayment/my" />
    <van-cell icon="coupon-o" border title="我的体检单" is-link to="index" />
    <van-cell border v-if="user" class="logout-cell" title="退出登录" @click="logout"/>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import userApi from '@/api/user'
export default {
  name: "MyIndex",
  data(){
    return{
      currentUser:{}
    }
  },
  computed:{
    ...mapState(['user'])
  },
  created() {

  },
  methods:{
    //退出登录
    async logout(){
      const{data:res} = await userApi.logout()
      if (res.code===200){
        //清除state中内容和localStorage中内容
        this.$store.commit('removeUser',null)
        //跳转到登陆页面
        await this.$router.push('/login')
      }
    }
  }
}
</script>

<style scoped lang="less">
.my-container{
  .my-info{
    background-color: rgb(68,145,235);
    .base-info{
      box-sizing: border-box;
      height: 115px;
      padding-top: 38px;
      padding-bottom: 11px;
      background-color: unset;
      .avatar{
        box-sizing: border-box;
        width: 66px;
        height: 66px;
        border: 1px solid #fff;
        margin-right: 11px;
      }
      .name {
        font-size: 15px;
        color: #fff;
      }
      .update-btn {
        height: 20px;
        font-size: 10px;
        color: #666666;
      }
    }
  }
  .not-login {
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(68,145,235);
    .mobile {
      width: 66px;
      height: 66px;
    }
    .text {
      font-size: 14px;
      color: #fff;
    }
  }
}
.logout-cell{
  text-align: center;
  color: white;
  background-color: red;
}
</style>
